<template lang='pug'>
.home-box
  .wrap
    .home-nav-input
      p
        span.login
        section
          i.iconfont.icon-sousuo
          input(type="text", placeholder="搜索商品名称")
        span.iconfont.icon-profile
    .home-list-nav-top
      ul(v-if="isShow")
        li(v-for="d,i in titleSize" :key="d" @click="activeFn(i)" :class="{'active' : i==zindex }") {{d}}
      .flex-box(v-else)
        h3 全部
        div
          p(v-for="d,i in titleSize" :key="d" @click="activeFn(i)" :class="{'active' : i==zindex }") {{d}}
      div.iconfont.icon-xiala(@click="isShow = !isShow")
  .opthego
  transition
    router-view
  .opthego
</template>
 
<script>
export default {
  name: "vueName",
  props:['titleSize'],
  data() {
    return {
      msg: "Welcome to your vueName",
      zindex: -1,
      routerList:['/home/liser','/home/phone','/home/inter','/home/tv','/home/homed','/home/computed'],
      isShow: true
    };
  },
  methods:{
    activeFn(i){
      this.isShow = true
      this.zindex = i
      let c  = this.routerList[i]
      if(this.$route.path==c){
        return 
      }
      this.$router.push(c)
    }
  },
  created(){
    let index = this.routerList.findIndex(item=> this.$route.path == item)
    this.zindex = index
    this.$store.commit('setIsShow',true)
  }
};
</script>
 
<style scoped lang="sass">
.home-box
  width: 100%
  .wrap
    width: 3.75rem
    position: fixed
    z-index: 2
    .home-nav-input
      height: .44rem
      background: #f2f2f2
      p
        display: flex
        justify-content: space-around
        align-items: center
        height: .44rem
        .login
          width: .25rem
          height: .16rem
          background: url(/image/login.png)
          background-size: 100% 100%
        section
          position: relative
          i
            position: absolute
            top: .08rem
            left: .05rem
        input
          width: 2.8rem
          height: .31rem
          padding-left: .3rem
          border: .5px solid #ccc
    .home-list-nav-top
      width: 100%
      height: .3rem
      background: #f2f2f2
      display: flex
      justify-content: space-around
      align-items: center
      position: relative
      div
        width: .21rem
        height: .20rem
      ul
        width: 90%
        display: flex
        justify-content: space-around
        color: rgb(116, 116, 116)
        font-size: .14rem
        li
          padding-bottom: .08rem
        .active
          color: rgb(237, 91, 0)
          border-bottom: 2px solid rgb(237, 91, 0)
      .flex-box
        width: 100%
        background: #f2f2f2
        position: relative
        z-index: 2
        div
          width: 100%
          height: .8rem
          background: #f2f2f2
          display: flex
          flex-wrap: wrap
          p
            width: .6rem
            margin: .11rem
            font-size: .14rem
            border: 1px solid #ccc
            background: #fff
            text-align: center
          .active
            background-color: #fde0d5
            border-color: #ff6700
            color: #ff6700
  .opthego
    width: 100%
    height: .75rem
  .v-enter
    transform: translateX(100%)
  .v-enter-active
    transition: .5s   
</style>